<hr/>
<h1 ><a [routerLink]="['/newscontent']" routerLinkActive="router-link-active" >跳转到新闻详情</a></h1>
<h3>1、get传值</h3>
<ul>
    <li  *ngFor="let item of cars;let key=index">
       <a [routerLink]="['/newscontent']" [queryParams]="{aid:key}" ><h4>{{item.cate}}</h4> </a>
       <p *ngFor="let item2 of item.list5">{{item2.title}}</p>
    </li>
</ul>
<hr/>
<h3>2、动态路由</h3>
<ul>
    <li *ngFor="let item of list4;let key=index">
        <a [routerLink]="['/newscontent/',key]" ><h4>{{key}}--{{item.name}}--{{item.age}}</h4> </a>
    </li>
</ul>
<h3>3、js跳转路由</h3>
<a [routerLink]="['/newscontent/','123']">跳转到商品详情</a>
<br/><br/>
<button (click)="goNewsContent()">js跳转路由</button>
<br/><br/>
<button (click)="goShouye()">跳转到Home页面</button>
<h3>4、get传值跳转路由</h3>
<button (click)="goNews()">get传值跳转路由</button>

<br/><br/><br/><br/>
<h1>引入Footer组件</h1>
<!-- 父组件获取子组件的方法内容，这里尝试用ViewChild来试试 -->
<!-- 1、定义#名字 -->

<app-footer #footer (outer)="hello($event)"></app-footer>


<hr/>
<button (click)="getChildMsg()">获取子组件的msg</button>
<button (click)="getChildMethod()">执行子组件的方法</button>
<h1>1、angualar模板里面绑定数据</h1>
<p>news works! 我是新闻组件22222222222222</p>
<h1>{{title}}</h1>
<h3>{{msg}}</h3>
<h3>{{msg2}}</h3>

<h6>name:{{userInfo.username}}-----age:{{userInfo.age}}</h6>
<h3>{{message}}</h3>


<h1>2、angular模板里面绑定属性</h1>
<div title="我是一个div">
    鼠标描上去
</div>
<br/>
<!-- 动态展示的数据用[] 括起来 -->
<div [title]="message">
    这里是绑定的属性
</div>
<input type="button" [value]="message"/>

<h1>3、angular模板里面绑定Html</h1>
<div>{{content}}</div>
<span [innerHtml]="content" class="red"></span>


<h1>4、angular模板里面允许做简单运算</h1>
1+2={{1+2}}

<h1>5、angular里面的数据循环</h1>
<ul>
    <li *ngFor="let item of arr">
        {{item}}
    </li>
</ul>
<ol>
    <li *ngFor="let item of list2">
        {{item}}
    </li>
</ol>
<ol>
    <li *ngFor="let item of list3">
        {{item}}
    </li>
</ol>
<ol>
    <li *ngFor="let item of list4">
        name:{{item.name}}------age:{{item.age}}
    </li>
</ol>
<!-- 循环复杂的数组 -->
<ol>
    <li *ngFor="let item of cars">
        <h2>名称：{{item.cate}}</h2>
       <ol>
           <!-- 二重循环， of 上面的item.list -->
           <li *ngFor="let car of item.list5">
               {{car.title}}
           </li>
       </ol>
       <h3>价格：{{item.price}}</h3>
    </li>
</ol>
<hr/>